<template>
	<div>
	
		<el-card class="el-card1" align='middle'>
			<div class="h11"><span>数字药匣</span>致力于弘扬中草药文化</div>
			<p class="textp">
				数字药匣是一个提供中草药知识服务的平台，相当于传统中药药匣，
				每一个
			</p>
			<p class="textp1">
				药匣放着不同中草药的相关信息，达到弘扬中国中草药文化的目的
			</p>
			<!-- <h1 class="h1">数字药匣致力于</h1>
			<h1 class="h11">弘扬中草药文化</h1> -->
			<img class="ximg" src="../assets/香料.png" width="500px"/>
			
			
			
		</el-card>  
		
			<!-- 药材展示轮播图 -->
			<el-card style="border: none; box-shadow: none;" align='middle'><Lunbo></Lunbo></el-card>
			
			<!-- 我们的服务 -->
			<el-card align='middle' style="box-shadow: none !important;border:none;margin-top: 0px;">
				<div class="OurServer">
					<h1 style="font-size: 4em;margin-bottom: 30px;">我们的服务</h1>
					<p>草药有百味，尝过方知其中味；人生有百态，走过才知其中意。我们需承神农文化，传本草精华，续中药神话。</p>
					<p>中药作为一种药材，是中华传统医学的重要组成部分；通过建立评价鉴定体系对中药材中药成分的鉴定和评价，有助于保证中药的质量和安全</p>
				
				<el-card class="el-card2" align='middle'>
					<div class="textbox">
						<div class="textsmallbox">
							<h3>药材知识</h3>
							<p style="margin-top: 10px;">中药作为一种药材，是中华传统医学的重要组成部分；中药作为一种药材，是中华传统医学的重要组成部分；</p>
						</div>
						<div class="textsmallbox">
							<h3>评价鉴定</h3>
							<p style="margin-top: 10px;">中药作为一种药材，是中华传统医学的重要组成部分；中药作为一种药材，是中华传统医学的重要组成部分；</p>
						</div>
						<div class="textsmallbox">
							<h3>相关性</h3>
							<p style="margin-top: 10px;">中药作为一种药材，是中华传统医学的重要组成部分；中药作为一种药材，是中华传统医学的重要组成部分；</p>
						</div>
					</div>
					
				</el-card>
				
				</div>
			</el-card>
			<!-- 药效 -->
			<el-card align='middle' class="el-card3">
				<h1 class="h1">药效特性</h1>
				<!-- <div class="box"></div> -->
			</el-card>
			
			<!-- 药效作用 -->
		
			<el-card style="box-shadow: none;border: none;" align='middle' >
				<div class="effectbox">
					<div class="effectsmallbox" v-for="data1 in textList" :key="data1.index">
					<p class="p1">{{data1.text}}</p>
					<img :src="data1.logo" width="30px" height="120px" style="margin-top: 30px;"/>
					<h2 class="h2">{{data1.name}}</h2>
					<img :src="data1.picture" width="220px"/>
					</div>
				</div>
			</el-card>
			
			<!-- 奶茶 -->
			<el-card align='middle' class="el-card4">
				<h1 style="margin-top: 90px;font-size: 3rem;">中药奶茶</h1>
				<img src="../assets/奶茶.png" class="teaicon">
				<div class="box"></div>
			</el-card>
			
			<!-- 中药奶茶 -->
			<div class="carouselBox">
			  <el-carousel :interval="4000" type="card" height="380px" indicator-position="none">
			    <el-carousel-item class="el-item" v-for="(item,index) in dataList" :key="index" >
					
					<div class="teabox1">
						<p style="margin-top: 8px;text-align: center;font-size: 16px; color:firebrick;font-weight:bold; margin-left: 5px;font-family: cursive;">{{item.title}}</p>
						<img  :src="item.img" width="160px" style="margin-top: 10px;"/>
						<p style="margin-left: 5px;font-family: cursive;">{{item.peifang}}</p>
						<p style="margin-left: 5px;font-family: cursive;">{{item.peifang1}}</p>
						<p style="margin-left: 5px;font-family: cursive;">{{item.process}}</p>
					</div>
					
			    </el-carousel-item>
			  </el-carousel>
			</div>
		
			<!-- 尾部footer -->
			<nav>
			  <ul>
				<li>
				  <a href="#">药材知识</a>
				</li>
				<li>
				  <a href="#">评价鉴定</a>
				</li>
				<li>
				  <a href="#">相关性</a>
				</li>
			   
			  </ul>
			</nav>
				
				<div class="copyright">
					<div class="copyright_c">
						<div class="copyright_head">
							<div class="copyright_L">
								<p><img src="../assets/shu1.png" /></p>
						</div>
							<div class="copyright_C">
								<div class="copyright_C_list">
									<p>网站管理员</p>
									<div class="about">
										<a href="#">黄静</a>
									</div>
									
									
								</div>
								<div class="copyright_C_list">
									<p>联系我们</p>
									<div class="about">
										<a href="#">网站管理员：306744855@qq.com</a>
										
									</div>
									<div class="about">
										<a href="#">联系电话：15217191707</a>
									</div>
									
								</div>
								<div class="copyright_C_list">
									<p>数字药匣</p>
									<div class="about">
										<a href="#">了解知识</a>
									</div>
									<div class="about">
										<a href="#">服务人们</a>
									</div>
								</div>
							</div>
							
						</div>
						<div class="copyright_bottom">
							<span>珠海市香洲区唐家湾镇金凤路18号北京师范大学珠海分校 </span>
						
						</div>
					</div>
				</div>
				</div>
</template>

<script>
	import Lunbo from '../components/Lunbo.vue'

export default {
  data() {
  	return{
		dataList:[
			{title:'姨妈饮',img:require('../assets/tea1.png'),peifang:'配方：红枣9g+桂圆9g+老红糖半块+牛奶100ml+水1000ml'
			,process:'流程：加入材料加入1000ML水浸泡15分钟加热煮沸，煮沸之后继续小火煮10分钟，加入牛奶100ML小火煮三分钟'},
			{title:'养颜饮',img:require('../assets/tea2.png'),peifang:'配方：桂圆5g+红枣9g+玫瑰5g+枸杞5g+水1000ml+50ml牛奶(可选)+蜂蜜5g(可选)'
			,process:'流程：加入材料加入1000ML水浸泡15分钟，加热煮沸，煮沸之后继续小火煮10分钟'},
			{title:'元气饮',img:require('../assets/tea3.png'),peifang:'配方：人工种植人参1根+甘草5g+水1000ML'
			,process:'流程：加入材料加入1000ML水浸泡15分钟，加热煮沸，煮沸之后继续小火煮10分钟'},
			{title:'酸梅汤',img:require('../assets/tea4.png'),peifang:'配方：乌梅10g+山楂5g+洛神花3g+甘草3g+陈皮3g+桑葚5g+桂花3g+薄荷1g+水1000ml+冰糖5g'
			,process:'流程：加入材料加入1000ML水浸泡15分钟，加热煮沸，煮沸之后继续小火煮10分钟'},
			{title:'祛湿饮',img:require('../assets/tea5.png'),peifang:'配方：获苓5g+陈皮3g+薏米5g+白术3g+冰糖3g+水1000ml'
			,process:'流程：加入材料加入1000ML水浸泡15分钟，加热煮沸，煮沸之后继续小火煮10分钟'},
			{title:'清火饮',img:require('../assets/tea6.png'),peifang:'配方：白术3g+冰糖3g+水1000ml'
			,process:'流程：加入材料加入1000ML水浸泡15分钟，加热煮沸，煮沸之后继续小火煮10分钟'}
		
		],
		textList:[
			{text:'营养学，也是要补精，营养均衡嘛，身体需要的营养充足，就是补精；而且我们需要能量，需要热量，就是益气，其实除了能量，益气还包括提高免疫力，能量充足，免疫力也提升。'
			,logo:require('../assets/文化.png'),
			name:'营养',picture:require('../assets/药材.png')},
			{text:'脾常储藏胃的精气，为胃行其津液。脾在五行属土，土具有贮藏﹑化生万物之性。上下至头足，皆以脾运胃内水谷所化生的精气为物质基础。'
			,logo:require('../assets/文化.png'),
			name:'补虚',picture:require('../assets/药材.png')},
			{text:'中药作为一种药材，是中华传统医学的重要组成部分；中药作为一种药材，是中华传统医学的重要组成部分；'
			,logo:require('../assets/文化.png'),
			name:'调养',picture:require('../assets/药材.png')},
			{text:'中药作为一种药材，是中华传统医学的重要组成部分；中药作为一种药材，是中华传统医学的重要组成部分；'
			,logo:require('../assets/文化.png'),
			name:'安神',picture:require('../assets/药材.png')},
			{text:'中药作为一种药材，是中华传统医学的重要组成部分；中药作为一种药材，是中华传统医学的重要组成部分；'
			,logo:require('../assets/文化.png'),
			name:'调息',picture:require('../assets/药材.png')},
			{text:'中药作为一种药材，是中华传统医学的重要组成部分；中药作为一种药材，是中华传统医学的重要组成部分；'
			,logo:require('../assets/文化.png'),
			name:'滋补',picture:require('../assets/药材.png')}
		],
	}
  },
  components:{Lunbo}
}
</script>

<style lang="less" scoped>
	/*背景*/
.el-card1 {
	box-shadow: none !important;
	border: none;
	padding: 0 !important;	
	margin-top: 30px;
	height: 860px;

	background: radial-gradient(circle at center,rgb(187,220,188) 0,  rgb(187,220,188) 10%,  rgb(187,220,188) 10%, rgb(232,246,233) 50%);
	background: radial-gradient(circle at center,rgb(187,220,188) 0,  rgb(187,220,188) 10%,  rgb(187,220,188) 10%, rgb(232,246,233) 20%);
	position: relative;
		 // background-image: linear-gradient(to right,rgb(230,240,207) 20%, rgb(192,214,150) 50%, rgb(230,240,207) 100%);
	background-image: url('../assets/背景2.png');
		
}

.h11{
	position: absolute;
	width: 35%;
	top: 200px;
	left: 300px;
	font-weight: bold;
	font-size: 70px;
}
.textp{
	position: absolute;
	left: 320px;
	font-size: 18px;
	bottom: 405px;
	
}
.ximg{
	position: absolute;
	right: 10px;
}
.textp1{
	position: absolute;
	left: 320px;
	bottom: 380px;
	font-size: 18px;
	
}
//////////////////

// 我们的服务
.OurServer{
	width: 100%;
	margin-top: 30px;
}
.el-card2{
	margin-top: 10px;
	border: none;
	box-shadow: none !important;
	display: inline-block;
}
.textbox{
	display: flex;
	
	flex-wrap: wrap;

	text-align: left;
	// background-color: aqua;
}
.textsmallbox{
	border: 2px solid rgb(241, 241, 241);
	border-top: 7px solid rgb(25, 127, 59);
	padding-top: 25px;
	padding-left: 25px;
	width: 300px;
	height: 200px;
	margin: 10px;
	
	border-radius: 20px;
	// background-color: red;
}
.textsmallbox:hover{
	transition-duration: 1s;
	box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}
////////////////////////////
// 过渡背景
.el-card3{
	box-shadow: none !important;
	border: none;
	height: 300px;
	margin-top: 50px;
	
	width: 95%;
	margin: 0 auto;
	background-color: #97a190;
	color: #E2F0D6;

	margin-bottom: 20px;
	// position: relative;
		transform: skewX(-45deg);
}
.h1 {
	margin-top: 90px;
	font-size: 3rem;
	 transform: skewX(45deg);
}
.el-card4{
	background-color: #F5EBD2;
	color: rgb(77, 64, 48);
	box-shadow: none !important;
	border: none;
	height: 300px;
	margin-top: 50px;
	
	
	margin-bottom: 20px;
	position: relative;
}
.box{
	position: absolute;
	background-color: white;
	width: 150px;
	height: 150px;
	top: 85%;
	left: 45%;
	transform: rotate(45deg);
}
//、、、、、、、、、、、、、、、、、

// 中药奶茶logo
.teaicon{
	position: absolute;
	right: 500px;
	bottom: 60px;
	width: 150px;
}


////////////////////////


// 药效作用
.effectbox{
	display: flex;

	justify-content: center;
	flex-wrap: wrap;
	
	// width: 50%;
}
.effectsmallbox{

	display: flex;
	// margin: auto;
	margin: 10px;
	margin-left: 15px;
	width: 400px;
	height: 300px;
	border-radius: 20px;
	border: 2px solid rgb(241, 241, 241);
	
}
.effectsmallbox:hover{
	box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
	transition-duration: 1s;
}
.h2{
	 margin-left:8px;
	width: 15%;
	font-size: 3rem;
	line-height: 100px;
	// background-color: blueviolet;
}
.p1{
	font-size: 0.3rem;
	width: 25%;
	color: dimgray;
	text-align: left;
	margin-left: 10px;
	margin-right: 8px;
	margin-top: 30px;
}
// 中药奶茶
.teabox1{
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 95%;
	height: 330px;
	margin: auto;
	font-size: 16px;

}

  .carouselBox {
      width: 80%;
    /*  max-width: 1200px;
      min-width: 1000px; */
      margin: 0 auto;
	 
      padding: 50px 0 ;
	  
	  text-align: center;
	  justify-content: center;
	  align-items: center;
	  /* background-color: orange; */
    }
	.el-item{
		border-radius: 20px;
		border: 1px solid rgb(205, 182, 177);
		background-color: #f8c387;
		margin-left: 150px; 
		height: 355px; 
		width: 330px;
}
// 底部

* {
	margin: 0;
	padding: 0;
	font-family: "微软雅黑";
}




nav {
 width: 100%;
  // mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
 background-color: #333;
  margin: 0 auto;
  padding: 60px 0;
}

nav ul {
  text-align: center;
  // background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
  // box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}

nav ul li {
  display: inline-block;
}
a{
	
	text-decoration: none;
}
nav ul li a {
  padding: 18px;
  font-family: "Open Sans";
  text-transform:uppercase;
  color: white;
  font-size: 1.5rem;
  text-decoration: none;
  display: block;
  margin-right: 100px;
  margin-left: 100px;
}



/*页脚*/
.copyright {
	padding-top: 79px;
	border-top: 1px solid #ededed;
}
.copyright_c {
	height: 313px;
	width: 1200px;
	margin: 0 auto;
}
.copyright_head {
	height: 247px;
	overflow: hidden;
	border-bottom: 1px solid #ededed;
}
.copyright_L {
	float: left;
	width: 406px;
}
.copyright_L p {
	display: block;
	width: 381px;
	height: 48px;
	margin-bottom: 26px;
}

.copyright_C {
	float: left;
	overflow: hidden;
}
.copyright_C_list {
	float: left;
	padding-top: 24px;
}
.copyright_C_list p {
	display: block;
	font-size: 18px;
	color: #333;
	padding-bottom: 28px;
}
.about {
	overflow: hidden;
	margin-bottom: 22px;
}
.about a {
	display: block;
	font-size: 16px;
	color: #666;
	float: left;
	margin-right: 24px;
}
.about a:hover {
	color: #3fc7ff;
}
.copyright_C_list:nth-child(2) {
	margin-left: 114px;
	margin-right: 46px;
}
.copyright_R {
	float: right;
	width: 150px;
}
.copyright_R span {
	display: block;
	width: 122px;
	height: 122px;
	border: 1px solid #ededed;
	padding: 13px;
}
.copyright_R span img {
	width: 100%
}
.copyright_R p {
	display: block;
	font-size: 12px;
	color: #999;
	text-align: center;
	padding-top: 18px;
}
.copyright_bottom {
	height: 65px;
	overflow: hidden;
}
.copyright_bottom span {
	display: block;
	line-height: 65px;
	font-size: 12px;
	color: #a9a9a9;
	float: left;
}
.copyright_bottom p {
	display: block;
	line-height: 65px;
	font-size: 12px;
	color: #a9a9a9;
	float: right;
}

</style>